<template>
    <div class="index">
        <div class="contain-top">
            <div class="ct" style="background-color: rgb(171, 167, 167);"><h3>浏览量 37865</h3></div>
            <div class="ct" style="background-color: rgb(134, 131, 131);"><h3>订单量 23645</h3></div>
            <div class="ct" style="background-color: rgb(90, 87, 87);"><h3>总金额 3476298 </h3></div>
        </div>
        <div class="contain-mid">
            <div class="cm-one" style="width: 51%;height:80%;padding: 20px;background-color: rgb(245, 241, 237);;border-radius: 10px;border: 1px solid #CCCCCC;">
                <i class="fa fa-circle" >待办事件</i>
                <div class="thing" style="width: 60%;height:80%;margin-left: 50px;margin-top: 10px border: 1px solid #CCCCCC;border-radius: 10px">
                    <span><h2>共有30条待处理订单</h2></span>
                    <span>商家产品重要的一步，就是为了你的产品穿上花了的外套（文案），好的产品描述还可以促进你的客户的关系。</span>
                </div>
              
            </div>
            <div class="cm-two" style="width:30%; height:80%;padding: 20px;background-color: rgb(245, 241, 237);;border-radius: 10px;border: 1px solid #CCCCCC;display: block">
                <div><i class="fa fa-circle" >商品零售量统计</i></div>
                <img src="./img/444.png" style="width:99%; height:90%;">
            </div>
        </div>
        <div class="contain-low">
            <div class="cl-one" style="width: 53%;height:85%;padding: 10px;background-color: rgb(245, 241, 237);;border-radius: 10px;border: 1px solid #CCCCCC;">
                <div><i class="fa fa-circle" >零售趋势图</i></div>
                <img src="./img/222.png"  style=" height:90%;">
                <img src="./img/333.png"  style=" height:90%;width: 50%;">
            </div>
            <div class="cl-two" style="width:31%; height:85%;padding: 10px;background-color: rgb(245, 241, 237);;border-radius: 10px;border: 1px solid #CCCCCC;">
                <div><i class="fa fa-circle" >用户统计环形图</i></div>
                <img src="./img/555.png" style="width:65%; height:90%;">
            </div>
        </div>

    </div>
</template>

<script>
module.exports = {
    data() {
        return{
            
        }
    },

    methods:{

    }
}
</script>

<style>
    .index{
        width: 85%;
        height:85%;
        position: absolute;
        top: 70px;
        left:200px;
        border-radius: 10px;
        background-color: rgb(245, 241, 237);

    }
    .contain-top{
        width: 100%;
        height:30%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .ct{
        width: 25%;
        height: 80%;
        border-radius: 10px;
        line-height: 200px;
        padding: 10px;
        border: 1px solid #CCCCCC;
    }
    .contain-mid{
        width: 100%;
        height: 43%;
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        top: 35%;
    }
    .contain-low{
        width: 100%;
        height: 25%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        top: 75%;
    }

</style>